<template>
  <div class="showview">
    <van-row gutter="10" class="header">
      <van-col span="3" class="lefticon">
        <van-icon name="bars" color="#f4f4f4" size="30px" />
      </van-col>
      <van-col span="21">
        <van-search v-model="keyword" show-action background="#ff5454" placeholder="请输入搜索关键词" @search="onSearch">
          <template #action>
            <div @click="onClickButton">
              <van-icon name="user" size="30px" color="#f4f4f4" />
            </div>
          </template>
        </van-search>
      </van-col>
      <!-- <van-col span="3">span: 8</van-col> -->
    </van-row>
    <!--轮播图-->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" width="100%" height="200px" />
      </van-swipe-item>
    </van-swipe>
    <!--通知栏-->
    <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
    <!--菜单项-->
    <van-swipe class="my-swipe" :touchable="true" indicator-color="white">
      <van-swipe-item>
        <van-grid :gutter="2" :border="false" :column-num="5" icon-size="50px">
          <van-grid-item v-for="item in hoteCategory" :key="item.name" :icon="item.img" :text="item.title" />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
    </van-swipe>
    <!---商品信息-->
    <van-grid :border="false" :column-num="2">
        <van-grid-item >
          <div class="caini" v-for="item in Guesslike" >
             <span style="color: white; font-weight: 700;">猜你喜欢</span>
          <van-image :src="item.img.split(',')[0]" alt="猜你喜欢 " style="width: 100%; height: 70%;">
            </van-image>
            <span style="color: rgb(21, 21, 21); font-weight: 700; margin-top: 2px;">{{item.name}}</span>
            <span style="color: red; font-weight: 700; margin-top: 4px;">{{item.price}}万</span>
          </div>
        </van-grid-item>
      <van-grid-item v-for="item in productData" :key="item.id">
        <van-image :src="item.img.split(',')[0]" />
        <span>
         {{ item.name }}
        </span>
        <div class="icontel">
          <van-icon name="hot-sale-o" style="color: red; " size="15px" />
          <span style="color: #ff2078; ">90最低价</span>
        </div>
        <div class="price-pro" style="color: red; font-size: 20px; font-weight: 700;">￥{{item.price}}</div>
      </van-grid-item>
    </van-grid>

  </div>






  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="cluster" :to="({name:'movecategory'})">分类</van-tabbar-item>
    <van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
    <van-tabbar-item icon="setting-o" :to="({ name: 'home' })">个人中心</van-tabbar-item>
  </van-tabbar>
</template>
<script setup lang="ts">
import router from '@/router';
import { onMounted, reactive, ref } from 'vue'
import { CategoryApi,ProductApi } from '@/api';
const active = ref('')
const keyword = ref('')
// const productData = reactive({
//   name: '',
//   img: '',
//   price:0
// })
const productData = ref([] as any)

const images =ref([
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
])

const hoteCategory = ref<any>([
  { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png', title: '华杉超市' },
  { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png', title: '华杉电器' },
  { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png', title: '服装美妆' },
  { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png', title: '华杉充值' },
  { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png', title: 'plus会员' }
])



const CallcategoryApi = () => {
  CategoryApi.select.call().then((res: any) => {  

    const parentId = res.filter((item: any) => item.parentId == 0)
    console.log(parentId);
   //把后台读取的数据进行 官网提供的名字替换
    res.forEach((item: any) => { 
      item.title=item.name
    })
    //只读取父目录的名字
    hoteCategory.value = res.filter((item:any) => item.parentId == 0)
    
  })
}

const Guesslike=ref<any>([])
//商品信息
const CallProductApi = () => { 
  ProductApi.select.call().then((res: any) => { 
    console.log(res);
    productData.value =res
    images.value = Array.from(res, ({ img }) => img).slice(0, 4)

  })
   //猜你喜欢
    const id = Number(Math.floor(Math.random() * 10))
  ProductApi.select.call({ id: id }).then((res: any) => { 
    console.log(res);
    Guesslike.value=res
  })
}
onMounted(() => { 
  CallcategoryApi()
  CallProductApi()
})
const onSearch = (val: any) => {
  console.log(val);
  console.log(keyword.value);
  router.push({ name: 'movelist', query: { name: val } })
}


const onClickButton = () => {

}

</script>
<style scoped>
.caini{
  /* background-color: #fd0e0e; */
  background:url("../assets/cnxh.jpg") no-repeat;
  background-size: 100% 70%;
 
}
.header {
  background-color: #ff5454;
}

.showview {
  height: 150px;
  background: linear-gradient(to bottom, #fd0e0e .73%, #f4efef 80.65%)
}

.lefticon .van-icon {
  margin: 10px;
  margin-left: 15px;
}

.van-col {
  height: 48px;
}

.van-search {
  height: 48px !important;
}

.icontel {
  margin-right: 80px;
  span{
    float: right;
  }
}

.price-pro {
  margin-right: 80px;
}

/**解决文本标题太长问题*/
.van-grid-item__content span {
  overflow: hidden;
  text-overflow: ellipsis;
  /*省略号...显示*/
  display: -webkit-box;
  /*将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 2;
  /*行数*/
  -webkit-box-orient: vertical;
  /*设置或检索伸缩盒对象的子元素的排列方式*/
}
</style>
<style>
.van-search__content {
  border-radius: 15px;
  --van-search-input-height: 30px;
}

.my-swipe .van-swipe-item {
  color: rgb(218, 216, 216);
  font-size: 20px;
  /* line-height: 50px; */
  text-align: center;
  background-color: #e4e8eb;
}
</style>